<template>
  <view class="content">
    <scroll-view scroll-y class="scroll-Y" lower-threshold="100" @scroll="onScroll" @scrolltolower="scrolltolower">
      <view class="main">
        <template v-for="(item, index) in data">
          <view class="thwartwise" :id="`item-${index}`" v-if="item.classify === 'OnlineLesson'" @click="onGoDetail(item)">
            <view class="thwartwise-box" style="background-color: #6147b2">
              <view class="thwartwise-box-image">
                <template v-if="item.autoVideo">
                  <m-video
                    muted
                    autoplay
                    loop
                    :controls="false"
                    :show-speed-rate-btn="false"
                    :src="item.videoAddress"
                    object-fit="cover"
                    token="AsMqnVHVX5siSwwz4ckDCOCHCim5XsvNNXR1GkIVmrs="
                  />
                </template>
                <uv-image :src="item.cover" width="100%" height="100%" mode="aspectFill" v-else></uv-image>
                <!-- 信息区域 -->
                <view class="thwartwise-box-image-title">
                  <view class="box">
                    <view class="grade">{{ gradeOptions.find(r => r.val === item.lesson.grade)?.label }} </view>
                    <view class="lessonNumber">
                      <uv-icon name="shipin" custom-prefix="custom-icon" color="#fff" size="26.163rpx"></uv-icon>
                      <view style="margin-left: 3px"> {{ item.lesson.lessonNumber }} 课时 </view>
                    </view>
                  </view>
                  <view class="name">
                    {{ item.lesson.name }}
                  </view>
                </view>
                <view class="thwartwise-box-image-shadow"> </view>
              </view>
              <view class="right-title" :style="{ 'text-shadow': `0 0 10px #6147b2` }">
                <view style="margin-top: 24.419rpx"> 自助课</view>
              </view>
            </view>
            <view class="thwartwise-info">
              BENEFIT PROGRAMS
              <view class="new-course" v-if="item.newCount"> +{{ item.newCount }} 新课 </view>
              <view class="new-update" v-if="item.newCount">
                <view class="inner-circle"> 更新 </view>
              </view>
            </view>
          </view>
          <view class="thwartwise" :id="`item-${index}`" v-else-if="item.classify === 'OfflineLesson'" @click="onGoDetail(item)">
            <view class="thwartwise-box" style="background-color: #ff7a66">
              <view class="thwartwise-box-image">
                <template v-if="item.autoVideo">
                  <m-video
                    muted
                    autoplay
                    loop
                    :controls="false"
                    :show-speed-rate-btn="false"
                    :src="item.videoAddress"
                    object-fit="cover"
                    token="AsMqnVHVX5siSwwz4ckDCOCHCim5XsvNNXR1GkIVmrs="
                  />
                </template>
                <uv-image :src="item.cover" width="100%" height="100%" mode="aspectFill" v-else></uv-image>
                <!-- 信息区域 -->
                <view class="thwartwise-box-image-title">
                  <view class="box">
                    <view class="grade">{{ gradeOptions.find(r => r.val === item.lesson.grade)?.label }} </view>
                  </view>
                  <view class="name">
                    {{ item.lesson.name }}
                  </view>
                </view>
                <view class="thwartwise-box-image-shadow"> </view>
              </view>
              <view class="right-title" :style="{ 'text-shadow': `0 0 10px #ff7a66` }">&nbsp;&nbsp;&nbsp;&nbsp;门店视频课 </view>
            </view>
            <view class="thwartwise-info">
              <view class="time">
                {{ item.lesson.time }}
              </view>
              <view class="endways-info-name">
                {{ item.lesson.merchant }}
              </view>
              <uv-icon name="dingwei" custom-prefix="custom-icon" color="#646464" size="24.419rpx"></uv-icon>
            </view>
          </view>

          <view class="endways" :id="`item-${index}`" v-else-if="['MerchantLesson'].includes(item.classify)" @click="onGoDetail(item)">
            <view class="endways-box" style="background-color: #47a0f3">
              <view class="endways-box-image">
                <view class="endways-box-image">
                  <template v-if="item.autoVideo">
                    <m-video
                      muted
                      loop
                      autoplay
                      :controls="false"
                      :show-speed-rate-btn="false"
                      :src="item.videoAddress"
                      token="AsMqnVHVX5siSwwz4ckDCOCHCim5XsvNNXR1GkIVmrs="
                      object-fit="cover"
                    />
                  </template>
                  <uv-image :src="item.cover" width="100%" height="100%" mode="aspectFill" v-else></uv-image>
                  <view class="endways-box-image-title">
                    <view class="grade">{{ gradeOptions.find(r => r.val === item.lesson.grade).label }}</view>
                    <view class="name">
                      {{ item.lesson.name }}
                    </view>
                    <view class="time">
                      {{ item.lesson.time }}
                    </view>
                  </view>
                  <view class="thwartwise-box-image-shadow"> </view>
                </view>
              </view>
              <view class="right-title" :style="{ 'text-shadow': `0 0 10px #47a0f3` }">&nbsp;&nbsp;&nbsp;&nbsp;门店教练课 </view>
            </view>
            <view class="endways-info">
              <view class="endways-info-name">
                {{ item.lesson.merchant }}
              </view>
              <uv-icon name="dingwei" custom-prefix="custom-icon" color="#646464" size="24.419rpx"></uv-icon>
            </view>
          </view>
          <view class="video" :id="`item-${index}`" v-else-if="['Video'].includes(item.classify)" @click="onGoDetail(item)">
            <view class="video-box" style="background-color: #47a0f3">
              <view class="video-box-image">
                <template v-if="item.autoVideo">
                  <m-video
                    muted
                    loop
                    autoplay
                    :controls="false"
                    :show-speed-rate-btn="false"
                    :src="item.videoAddress"
                    object-fit="cover"
                    token="AsMqnVHVX5siSwwz4ckDCOCHCim5XsvNNXR1GkIVmrs="
                  />
                </template>
                <uv-image :src="item.cover" width="100%" height="100%" mode="aspectFill" v-else></uv-image>
                <view class="video-box-image-title" v-if="item.title">
                  {{ item.title }}
                </view>
                <view class="video-box-image-shadow"> </view>
              </view>
            </view>
            <view class="video-info" @click="onGoTeacher(item.teacher.id)">
              <uv-avatar :src="item.teacher.avatar || defaultImages[2]" size="50.581rpx"></uv-avatar>
              <view class="video-info-name">
                {{ item.teacher.name || 'Teacher Name' }}
              </view>
            </view>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import debounce from '@/uni_modules/uv-ui-tools/libs/function/debounce.js';
  import { defaultImages, defaultImagesList, gradeOptions } from '@/common/js/global.js';
  import { ref, reactive, getCurrentInstance, computed, defineProps, watch, defineExpose } from 'vue';
  import { onGoTeacher } from '@/common/js/fn.js';
  const instance = getCurrentInstance();
  const emits = defineEmits(['onScroll', 'scrolltolower']);
  const props = defineProps({
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    top: {
      type: Number,
      default: 0
    }
  });
  // 滚动事件，然后加了个防抖
  const onScroll = ({ detail }) => {
    debounce(() => {
      uni
        .createSelectorQuery()
        .in(instance.proxy)
        .selectAll('.thwartwise, .endways, .video')
        .boundingClientRect(data => {
          for (let index = 0; index < data.length; index++) {
            const r = data[index];
            if (r.top > props.top) {
              let active = Number(r.id.replace(/\D/g, ''));
              emits('onScroll', { detail, active });
              break;
            }
          }
        })
        .exec();
    }, 300);
  };
  // 滚动到底部
  const scrolltolower = () => {
    let active = 0;
    if (['Lesson', 'MerchantLesson', 'Video'].includes(props.data[props.data.length - 1].classify)) {
      active = props.data.length - 2;
    } else {
      active = props.data.length - 1;
    }
    emits('scrolltolower', active);
  };
  const onGoDetail = item => {
    if (item.classify === 'Video') {
      uni.$uv.route({
        url: '/pages/teacher/videoPreview',
        params: {
          id: item.id
        }
      });
    } else if (item.classify === 'OnlineLesson') {
      uni.$uv.route({
        url: '/pages/online/index',
        params: {
          id: item.id
        }
      });
    } else {
      uni.$uv.route({
        url: '/pages/main/course',
        params: {
          id: item.id
        }
      });
    }
  };
</script>

<style lang="scss" scoped>
  .content {
    height: 100%;
    margin: 22.674rpx 12.209rpx;
    font-family: Source Han Sans CN;
    font-size: 24.419rpx;
    .scroll-Y {
      height: 100%;
    }
    .main {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .thwartwise {
      width: 100%;
      height: 418.605rpx;
      margin-bottom: 26.163rpx;
      display: flex;
      flex-direction: column;
      border-radius: 19.186rpx;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
      &-box {
        flex: 1;
        position: relative;
        &-image {
          height: 100%;
          width: 100%;
          clip-path: inset(0 0 0 0 round 0 174.419rpx 0 0);
          &-title {
            position: absolute;
            bottom: 17.442rpx;
            left: 19.186rpx;
            color: #fff;
            font-size: 20.93rpx;
            z-index: 1;
            .box {
              display: flex;
              .grade {
                width: fit-content;
                background: rgba(97, 71, 178, 1);
                font-size: 19.186rpx;
                font-weight: 900;
                text-align: center;
                color: rgba(255, 255, 255, 1);
                padding: 3px 10.465rpx;
              }
              .lessonNumber {
                margin-left: 10.465rpx;
                width: fit-content;
                background: #000;
                font-size: 19.186rpx;
                font-weight: 900;
                text-align: center;
                color: rgba(255, 255, 255, 1);
                padding: 3px 10.465rpx;
                display: flex;
                align-items: center;
              }
            }
            .name {
              font-size: 24.419rpx;
              font-weight: 900;
              margin-bottom: 10.465rpx;
              margin-top: 6.977rpx;
            }
          }
          &-shadow {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 340.116rpx;
            width: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44.6%, rgba(0, 0, 0, 0.7) 100%);
          }
        }
      }
      &-info {
        background: #e5e5e5;
        height: 64.535rpx;
        color: #646464;
        font-size: 20.93rpx;
        padding-left: 26.163rpx;
        display: flex;
        align-items: center;
        position: relative;
        .new-course {
          color: #6147b2;
          font-size: 24.419rpx;
          font-weight: 900;
          margin-left: 61.047rpx;
        }
        .new-update {
          background-color: #ffea31;
          font-size: 24.419rpx;
          font-weight: 700;
          line-height: 18.48px;
          color: #fff;
          font-family: Microsoft YaHei;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          padding: 5.233rpx;
          z-index: 9999;
          position: absolute;
          right: 80.233rpx;
          bottom: 6.977rpx;
          .inner-circle {
            width: 62.791rpx;
            height: 62.791rpx;
            background-color: #6147b2;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transform: rotate(-18deg);
          }
        }
      }
    }
    .endways {
      height: 589.535rpx;
      width: 352.07rpx;
      margin-bottom: 26.163rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-top-left-radius: 19.186rpx;
      border-top-right-radius: 19.186rpx;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
      &-box {
        flex: 1;
        position: relative;
        border-bottom-left-radius: 19.186rpx;
        border-bottom-right-radius: 19.186rpx;
        overflow: hidden;
        &-image {
          height: 100%;
          width: 100%;
          clip-path: inset(0 0 0 0 round 0 174.419rpx 0 0);
          &-title {
            position: absolute;
            bottom: 17.442rpx;
            left: 19.186rpx;
            color: #fff;
            font-size: 20.93rpx;
            z-index: 1;

            .grade {
              width: fit-content;
              background: rgba(97, 71, 178, 1);
              font-size: 19.186rpx;
              font-weight: 900;
              text-align: center;
              color: rgba(255, 255, 255, 1);
              padding: 3px 10.465rpx;
            }
            .name {
              font-size: 24.419rpx;
              font-weight: 900;
              margin-bottom: 10.465rpx;
              margin-top: 6.977rpx;
            }
          }
        }
      }
      &-info {
        height: 38.372rpx;
        display: flex;
        align-items: center;
        padding-top: 8.721rpx;
        box-sizing: border-box;

        &-name {
          padding-left: 20.93rpx;
          color: #646464;
          font-size: 20.93rpx;
          font-weight: 400;
          margin-right: 17.442rpx;
        }
        // background-color: #fafafa;
      }
    }
    .video {
      height: 589.535rpx;
      width: 352.07rpx;
      margin-bottom: 26.163rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-top-left-radius: 19.186rpx;
      border-top-right-radius: 19.186rpx;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
      &-box {
        height: 507.558rpx;
        position: relative;
        border-bottom-left-radius: 19.186rpx;
        border-bottom-right-radius: 19.186rpx;
        overflow: hidden;
        &-image {
          height: 100%;
          width: 100%;
          &-title {
            position: absolute;
            bottom: 17.442rpx;
            left: 19.186rpx;
            font-weight: 900;
            color: #fff;
            z-index: 1;
          }
          &-shadow {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 228.488rpx;
            width: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44.6%, rgba(0, 0, 0, 0.7) 100%);
          }
        }
      }
      &-info {
        flex: 1;
        display: flex;
        align-items: flex-end;
        padding-top: 6.977rpx;
        margin-bottom: 26.163rpx;
        padding-left: 26.163rpx;
        font-size: 20.93rpx;
        &-name {
          margin-left: 12.209rpx;
          color: #646464;
        }
      }
    }
  }
  .right-title {
    position: absolute;
    width: 94.209rpx;
    color: #ffffff;
    right: 13.953rpx;
    top: 5.233rpx;
    font-weight: bold;
    color: white; /* 文字颜色 */
    text-align: right;
    text-shadow: 0 0 10px #000;
  }
</style>
